<template>
  <div>
    <i-page-header class="product_tabs" title="单位管理"> </i-page-header>
    <Card :bordered="false" dis-hover class="ivu-mt">
      <div class="search-inner">
        <div class="fx-r fx-bc">
          <div class="label">商户信息:</div>
          <div style="width: 160px" class="value">
            <el-input
              v-model="formValidate.title"
              placeholder="请输入商户信息"
            />
          </div>

          <div class="label">联系电话:</div>
          <div style="width: 160px" class="value">
            <el-input
              v-model="formValidate.unit_lxtel"
              placeholder="请输入联系电话"
            />
          </div>

          <div class="label">提交时间:</div>
          <div style="width: 210px" class="value">
            <DatePicker
              v-model="formValidate.timeVal"
              format="yyyy/MM/dd"
              type="datetimerange"
              placement="bottom-start"
              placeholder="自定义时间"
              style="width: 210px"
              class="mr20"
            ></DatePicker>
          </div>

          <div class="value">
            <el-button @click="tapSearch" type="primary" icon="el-icon-zoom-in"
              >搜索</el-button
            >
          </div>
          <div class="fx-g1"></div>

          <el-button @click="exports" icon="el-icon-connection"
            >导出XLS</el-button
          >
        </div>
      </div>
    </Card>

    <el-tabs v-model="activeName" @tab-click="tapTabs">
      <el-tab-pane
        :key="index"
        :name="'tab_' + item.code"
        :label="item.name + '(' + item.count + ')'"
        v-for="(item, index) in tabsAr"
      ></el-tab-pane>
    </el-tabs>

    <div style="width: 98%">
      <Card :bordered="false" dis-hover class="ivu-mt">
        <el-table
          :data="tableData"
          :max-height="elMain - 220"
          v-loading="loading"
          style="margin-top: 10px"
          border
          row-key="id"
        >
          <el-table-column label="序" align="center" prop="name" width="80px">
            <template #default="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>

          <el-table-column
            label="商家信息"
            align="center"
            width="120px"
            prop="name"
          >
          </el-table-column>

          <el-table-column
            label="规模类型"
            align="center"
            width="120px"
            prop="type_scale"
          >
          </el-table-column>

          <el-table-column
            label="商户类型"
            align="center"
            width="120px"
            prop="type_name"
          >
          </el-table-column>

          <el-table-column
            label="所属中队"
            align="center"
            width="120px"
            prop="bumen_name"
          >
          </el-table-column>

          <el-table-column
            label="联系电话"
            align="center"
            width="120px"
            prop="tel"
          >
          </el-table-column>

          <el-table-column
            label="联系地址"
            align="center"
            width="120px"
            prop="address"
          >
          </el-table-column>

          <el-table-column
            label="上次清洁时间"
            align="center"
            width="120px"
            prop="sub_time"
          >
          </el-table-column>

          <el-table-column
            label="下次清洗时间"
            align="center"
            width="120px"
            prop="next_time"
          >
          </el-table-column>

          <el-table-column
            label="处理人"
            align="center"
            width="120px"
            prop="sh_name"
          >
            <template #default="scope">
              <div v-for="item in scope.row.user" :key="item">
                <el-tag style="margin-bottom: 6px">{{ item.name }}</el-tag>
              </div>
            </template>
          </el-table-column>

          <el-table-column
            label="指派处理"
            align="center"
            width="120px"
            prop="zp_time"
          >
          </el-table-column>

          <el-table-column
            label="延迟天"
            align="center"
            width="120px"
            prop="yc_time"
          >
            <template #default="scope">
              {{ scope.row.delay_day == 0 ? '-' : scope.row.delay_day + '天' }}
            </template>
          </el-table-column>

          <el-table-column
            label="延迟超时"
            align="center"
            prop="designate_out_time"
          >
            <template #default="scope">
              <template v-if="scope.row.delay_time > 0">
                <div
                  v-if="scope.row.delay_time < $utils.strtotime()"
                  style="color: red"
                >
                  {{ $utils.date('Y-m-d', scope.row.delay_time) }}
                </div>
                <div v-else>
                  {{ $utils.date('Y-m-d', scope.row.delay_time) }}
                </div>
              </template>
              <div v-else>-</div>
            </template>
          </el-table-column>

          <el-table-column label="状态" align="center" fixed="right">
            <template #default="scope">
              <el-tag type="default" v-if="scope.row.is_zp == 0">未指派</el-tag>
              <el-tag type="danger" v-if="scope.row.is_zp == 1">指派中</el-tag>
            </template>
          </el-table-column>

          <el-table-column
            label="操作"
            width="200"
            align="center"
            fixed="right"
          >
            <template #default="scope">
              <a @click="tapLook(scope.row.id)">记录</a>
              <Divider type="vertical" />
              <template v-if="scope.row.is_zp == 0">
                <a @click="tapZp(scope.row)">发起指派</a>
                <Divider type="vertical" />
              </template>
              <el-button type="text" @click="tapYq(scope.row)" disabled>延期</el-button>
              <!-- <a >延期</a> -->
            </template>
          </el-table-column>
        </el-table>

        <div class="acea-row row-right page">
          <Page
            :total="page.count"
            show-elevator
            show-total
            @on-change="tapPage"
            :page-size="page.pageSize"
          />
        </div>
      </Card>
    </div>

    <!--延期-->
    <el-dialog
      :visible.sync="dialogVisible"
      title="延期操作"
      :close-on-click-modal="false"
      width="680px"
    >
      <el-form :model="form" ref="form" label-width="100px">
        <el-row :space="24">
          <el-col :span="24">
            <el-form-item label="延期天数">
              <div class="fx-r fx-bc">
                <el-radio-group v-model="form.day_type">
                  <el-radio :label="5" :disabled="form.day_type != 5"
                    >5天</el-radio
                  >
                  <el-radio :label="7" :disabled="form.day_type != 7"
                    >7天</el-radio
                  >
                  <el-radio :label="10" :disabled="form.day_type != 10"
                    >10天</el-radio
                  >
                  <el-radio :label="-1" disabled>其他</el-radio>
                </el-radio-group>

                <el-input
                  v-if="form.day_type == -1"
                  placeholder="请输入延期天数"
                  style="width: 100px; margin-left: 10px"
                  autocomplete="off"
                  v-model="form.time"
                ></el-input>
              </div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :space="24">
          <el-col :span="24">
            <el-form-item label="延期说明">
              <el-input
                type="textarea"
                :autosize="{ minRows: 6, maxRows: 8 }"
                placeholder="请输入延期说明"
                v-model="form.mono"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer fx-r fx-ae">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="tapSubmitYq">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      :visible.sync="dialogVisible2"
      title="查看数据"
      :close-on-click-modal="false"
      width="680px"
    >
      <el-form :model="form" ref="form" label-width="100px">
        <div>
          <el-row :space="24">
            <el-col :span="12">
              <el-form-item label="商户名称">
                {{ itemAr.name }}
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="商户类型">
                {{ itemAr.type_name }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :space="24">
            <el-col :span="12">
              <el-form-item label="规模类型">
                {{ itemAr.type_scale }}
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="地址">
                {{ itemAr.address }}
              </el-form-item>
            </el-col>
          </el-row>

          <div v-if="itemAr.doAr.length > 0">
            <el-divider content-position="left">处理情况</el-divider>
            <div class="details-item" v-for="oitem in itemAr.doAr" :key="oitem">
              <Card
                :bordered="false"
                dis-hover
                class="ivu-mt"
                style="background: #f1f1f1"
              >
                <div class="list fx-r">
                  <div style="width: 50%" v-for="item2 in oitem" :key="item2">
                    <el-row :space="24">
                      <el-col :span="24">
                        <el-form-item label="处理人">
                          {{ item2.sh_name }}
                        </el-form-item>
                      </el-col>
                    </el-row>

                    <el-row :space="24">
                      <el-col :span="24">
                        <el-form-item label="处理情况">
                          <div v-if="item2.status == 1" style="color: #1eff00">
                            已处理
                          </div>
                          <div v-if="item2.status == 0" style="color: red">
                            未处理
                          </div>
                        </el-form-item>
                      </el-col>
                    </el-row>

                    <el-row :space="24">
                      <el-col :span="24">
                        <el-form-item label="处理结果">
                          <div v-if="item2.state == 1" style="color: #1eff00">
                            已完成
                          </div>
                          <div v-if="item2.state == -1" style="color: red">
                            驳回申请
                          </div>
                        </el-form-item>
                      </el-col>
                    </el-row>

                    <el-row :space="24">
                      <el-col :span="24">
                        <el-form-item label="指派时间">
                          {{ item2.expire_time }}
                        </el-form-item>
                      </el-col>
                    </el-row>

                    <el-row :space="24">
                      <el-col :span="24">
                        <el-form-item label="处理时间">
                          {{ item2.chuli_time }}
                        </el-form-item>
                      </el-col>
                    </el-row>

                    <el-row :space="24">
                      <el-col :span="24">
                        <el-form-item label="处理图片">
                          <div class="ui-update fx-r">
                            <div
                              class="avatar-img fx-h fx-ac fx-bc"
                              v-for="item in item2.chuli_img"
                              :key="item"
                            >
                              <img v-image-preview :src="item" v-lazy="item" />
                            </div>
                          </div>
                        </el-form-item>
                      </el-col>
                    </el-row>

                    <el-row :space="24">
                      <el-col :span="24">
                        <el-form-item label="处理签名">
                          <div
                            class="avatar-img fx-h fx-ac fx-bc"
                            v-if="item2.user_qm != ''"
                          >
                            <img
                              v-image-preview
                              :src="item2.user_qm"
                              v-lazy="item2.user_qm"
                            />
                          </div>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </div>
                </div>
              </Card>
            </div>
          </div>

          <div v-if="itemAr.logAr.length > 0">
            <el-divider content-position="left">延期日志</el-divider>

            <el-table :data="itemAr.logAr" border style="width: 100%">
              <el-table-column
                label="序"
                prop="index"
                width="55"
                align="center"
              ></el-table-column>

              <el-table-column
                label="标题"
                prop="name"
                align="center"
                width="120"
              ></el-table-column>

              <el-table-column
                label="内容"
                prop="content"
                align="center"
              ></el-table-column>

              <el-table-column
                label="延期天数"
                prop="v"
                align="center"
                width="80"
              ></el-table-column>

              <el-table-column
                label="操作时间"
                prop="time"
                align="center"
                width="120"
              >
                <template slot-scope="scope">
                  {{ $utils.date('Y-m-d', scope.row.time) }}
                </template>
              </el-table-column>

              <el-table-column
                label="操作人"
                prop="admin_name"
                align="center"
                width="120"
              ></el-table-column>
            </el-table>
          </div>
        </div>
      </el-form>
    </el-dialog>

    <!--指派人-->
    <el-dialog
      :visible.sync="dialogVisible4"
      title="指派单位"
      :close-on-click-modal="false"
      width="680px"
    >
      <el-form :model="zpai" ref="form" label-width="100px">
        <el-row :space="24">
          <el-col :span="24">
            <el-form-item label="项目指派">
              <el-select
                style="width: 100%"
                filterable
                v-model="zpai.uid"
                placeholder="请选择指派人员"
              >
                <el-option
                  v-for="item in userAr"
                  :key="item.uid"
                  :label="item.name"
                  :value="item.uid"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :space="24">
          <el-col :span="24">
            <el-form-item label="超时天数">
              <div class="fx-r fx-bc">
                <el-radio-group v-model="zpai.day_type">
                  <el-radio :label="3">3天</el-radio>
                  <el-radio :label="5">5天</el-radio>
                  <el-radio :label="7">7天</el-radio>
                  <el-radio :label="-1">其他</el-radio>
                </el-radio-group>

                <el-input
                  v-if="zpai.day_type == -1"
                  placeholder="请输入超时天数"
                  style="width: 100px; margin-left: 10px"
                  autocomplete="off"
                  v-model="zpai.time"
                ></el-input>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer fx-r fx-ae">
        <el-button @click="dialogVisible4 = false">取 消</el-button>
        <el-button type="primary" @click="subZhipai">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import IPageHeader from '@/layouts/system/page-header/index'
import { mapState, mapActions } from 'vuex'
import UiUpload from '@/ui/upload/index'
import UiUploadMuch from '../../../ui/upload/more_index'
import Setting from '../../../setting'
import {
  SystemProjectBumen,
  SystemProjectCqYq,
  SystemProjectCzItem,
  SystemProjectCzZhipai,
  SystemProjectDel,
  SystemProjectFk,
  SystemProjectInfo,
  SystemProjectInit,
  SystemProjectItem,
  SystemProjectList,
  SystemProjectListDown,
  SystemProjectOk,
  SystemProjectSave,
  SystemProjectSh,
  SystemProjectzhipai,
} from '../../../api/system/project'
import {
  SystemMemberListAll,
  SystemMemberSave,
} from '../../../api/system/member'
import {
  SystemMerchantsCqList,
  SystemMerchantsCqListAll,
  SystemMerchantsCqShDel,
  SystemMerchantsList,
} from '../../../api/system/merchants'
import dayjs from 'dayjs'
import { export_json_to_excel } from '../../../libs/Export2Excel'
export default {
  name: 'system_project_index',
  components: { UiUploadMuch, UiUpload, IPageHeader },
  computed: {
    ...mapState('pub/layout', ['elMain']),
    ...mapState('system/user', ['info']),
  },
  data() {
    return {
      bankAr: [],
      dialogVisible: false,
      dialogVisible2: false,
      dialogVisible3: false,
      dialogVisible4: false,
      dialogVisible5: false,

      loading: false,
      tableData: [],
      bumenAr: [],

      activeName: 'tab_all',
      tabsAr: [],

      itemAr: {
        doAr: [],
        logAr: [],
      },

      upHeaders: {},
      upUrl: '',
      page: {
        count: 0, //一共多少数量
        pageSize: 0, //每一页码数量
        page: 1, //当前页码
      },
      formValidate: { title: '' },
      form: {
        time: 3,
        mono: '',
        m_id: 0,
        day_type: 5,
      },

      userAr: [],
      zpai: {},

      fk: {
        id: 0,
        mono: '',
        imgsAr: [],
      },
    }
  },

  created() {
    var upHeaders = {}
    //上传路径
    this.upUrl = Setting.apiBaseURL + '/systemv1/upload/index'
    //上传header数据
    const token = this.$utils.util.cookies.get('system_token')
    if (token) {
      upHeaders['SYSTEM-ACC-TOKEN'] = token
    }
    this.upHeaders = upHeaders
  },

  mounted() {
    this.initView()
  },
  methods: {
    initView: function () {
      this.formValidate.zhip = this.$route.query.zhip || ''
      this.formValidate.bumen_id = this.$route.query.bumen_id || ''
      //this.totalInit();
      this.getData()
    },
    /**
     * 统计数据
     */
    totalInit: function () {
      SystemMerchantsCqShDel().then((res) => {
        if (res.code == 200) {
          this.tabsAr = res.data
        }
      })
    },

    /**
     * 获取数据
     */
    getData: function () {
      SystemMerchantsCqList({
        page: this.page.page,
        keyword: this.formValidate.title,
        zhip: this.formValidate.zhip,
        bumen_id: this.formValidate.bumen_id,
        type: this.formValidate.state,
        issecurities: this.formValidate.issecurities,
      })
        .then((res) => {
          this.loading = false
          if (res.code == 200) {
            this.tableData = res.data.list
            this.page.pageSize = res.data.pageSize
            this.page.count = res.data.pageCount
          } else {
            this.$alert(res.msg)
          }
        })
        .catch((err) => {
          console.log(err)
          this.loading = false
          this.$utils.loadingClose()
          this.$alert('网络繁忙，加载失败，请稍等片刻在尝试!', '系统提示')
        })
    },

    tapSh: function () {
      this.dialogVisible3 = true
      this.shform = {
        id: this.itemAr.id,
        sh_type: 0,
        sh_mono: '',
        isdu: false,
        transact_id: '',
        du_time: '',
      }
    },

    /**
     * tab数据
     */
    tapTabs: function () {
      this.page.page = 1
      this.getData()
    },

    tapSearch() {
      this.page.page = 1
      this.getData()
    },

    /**
     * 分页
     */
    tapPage: function (index) {
      this.page.page = index
      this.getData()
    },

    /**
     * 查看数据
     * @param id
     */
    tapLook: function (id) {
      this.$utils.loading(this, '获取数据中...')
      SystemProjectCzItem({
        id: id,
      })
        .then((res) => {
          this.$utils.loadingClose()
          if (res.code == 200) {
            this.itemAr = res.data
            this.dialogVisible2 = true
          } else {
            this.$alert(res.msg)
          }
        })
        .catch((err) => {
          console.log(err)
          this.$utils.loadingClose()
          this.$alert('网络繁忙，加载失败，请稍等片刻在尝试!', '系统提示')
        })
    },

    tapEdit: function (id) {
      this.$utils.loading(this, '获取数据中...')
      SystemProjectInfo({
        id: id,
      })
        .then((res) => {
          this.$utils.loadingClose()
          if (res.code == 200) {
            this.form = res.data
            this.dialogVisible = true
          } else {
            this.$alert(res.msg)
          }
        })
        .catch((err) => {
          console.log(err)
          this.$utils.loadingClose()
          this.$alert('网络繁忙，加载失败，请稍等片刻在尝试!', '系统提示')
        })
    },

    /**
     * 延期操作
     */
    tapYq: function (item) {
      let type_num = 5
      if (item.type_scale == '小型') {
        type_num = 5
      }
      if (item.type_scale == '中型') {
        type_num = 7
      }
      if (item.type_scale == '大型') {
        type_num = 10
      }

      this.dialogVisible = true
      this.form = {
        m_id: item.id,
        time: '',
        mono: '',
        day_type: type_num,
      }
    },

    tapSubmitYq: function () {
      if (this.form.day_type != -1) {
        this.form.time = this.form.day_type
      }

      if (this.form.time == '') {
        this.$alert('请输入延期时间')
        return
      }

      this.$utils.loading(this, '获取数据中...')
      SystemProjectCqYq(this.form)
        .then((res) => {
          this.$utils.loadingClose()
          if (res.code == 200) {
            this.dialogVisible = false
            this.getData()
          } else {
            this.$alert(res.msg)
          }
        })
        .catch((err) => {
          console.log(err)
          this.$utils.loadingClose()
          this.$alert('网络繁忙，加载失败，请稍等片刻在尝试!', '系统提示')
        })
    },

    tapZp: function (item) {
      console.log(item)
      this.zpai = {
        id: item.id,
        time: '',
        uid: '',
      }
      SystemMemberListAll({
        bumen_id: item.bumen_id,
        type: 1,
      }).then((res) => {
        if (res.code == 200) {
          this.userAr = res.data
        }
      })
      this.dialogVisible4 = true
    },

    /**
     * 指派信息
     */
    subZhipai: function () {
      if (this.zpai.transact_id == '') {
        this.$alert('请选择项目指派单位')
        return
      }

      if (this.zpai.day_type != -1) {
        this.zpai.du_time = this.zpai.day_type
      } else {
        this.zpai.du_time = this.zpai.time
      }

      if (this.zpai.du_time == '') {
        this.$alert('请选择指派时间')
        return
      }

      this.$utils.loading(this, '获取数据中...')
      SystemProjectCzZhipai(this.zpai)
        .then((res) => {
          this.$utils.loadingClose()
          if (res.code == 200) {
            this.dialogVisible4 = false
            this.getData()
          } else {
            this.$alert(res.msg)
          }
        })
        .catch((err) => {
          console.log(err)
          this.$utils.loadingClose()
          this.$alert('网络繁忙，加载失败，请稍等片刻在尝试!', '系统提示')
        })
    },

    tapFk: function (id) {
      this.fk.id = id
      this.fk.mono = ''
      this.fk.imgsAr = []
      this.dialogVisible5 = true
    },

    // 导出
    exports(index) {
      this.$utils.loading(this, '获取数据中...')
      SystemMerchantsCqListAll({
        ...this.formValidate,
      })
        .then((res) => {
          this.$utils.loadingClose()
          if (res.code == 200) {
            import('@/libs/Export2Excel').then((excel) => {
              const tHeader = [
                '商户名称',
                '商户类型',
                '规模类型',
                '所属中队',
                '联系地址',
                '上次清洁时间',
                '下次清洗时间',
                '处理人',
                '指派处理',
                '延迟天',
                '延迟超时',
                '状态',
                '',
              ]
              const filterVal = [
                'name',
                'type_name',
                'type_scale',
                'bumen_name',
                'address',
                'sub_time',
                'next_time',
                'user',
                'zp_time',
                'delay_day',
                'delay_time',
                'zp_status',
              ]
              var data = this.formatJson(filterVal, res.data)
              var filename = '超期商户'
              export_json_to_excel({
                header: tHeader,
                data,
                filename,
              })
            })
          } else {
            this.$alert('网络繁忙，加载失败，请稍等片刻在尝试!', '系统提示')
          }
        })
        .catch((err) => {})
    },
    /**
     *  格式数据
     *  @filterVal  格式头
     *  @tableData  用来格式的表格数据
     */
    formatJson(filterVal, tableData) {
      return tableData.map((v) => {
        return filterVal.map((j) => {
          return v[j]
        })
      })
    },
  },
}
</script>

<style scoped>
.avatar-img {
  border: 1px dashed #d9d9d9;
  overflow: hidden;
  width: 82px;
  height: 82px;
  border-radius: 6px;
  margin-right: 10px;
  position: relative;
}
.avatar-img .pclose {
  position: absolute;
  top: 0px;
  right: 0px;
  background: #fff;
  border-radius: 50%;
  width: 15px;
  height: 15px;
}
.avatar-img img {
  width: 100%;
}

.details-item .title {
  color: #17233d;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 10px;
}

.details-item .list {
}

.details-item .list .term {
  width: 50%;
  color: #17233d;
  white-space: nowrap;
  font-size: 12px;
  padding-bottom: 10px;
}
.item-img {
  border: 1px dashed #d9d9d9;
  overflow: hidden;
  width: 82px;
  height: 82px;
  border-radius: 6px;
  margin-right: 10px;
  position: relative;
}
.item-img img {
  width: 100%;
}
</style>
